<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	<title>aLeX^rS</title>
	<!--[if lt IE 9]>
	<script src="js/html5.js" type="text/javascript"></script>
	<![endif]-->
	<!--<link rel="stylesheet" id="style-css"  href="css/reset.css" type="text/css" media="all" />-->
	<link rel="stylesheet/less" type="text/css" href="css/main.less">
		
	
	
	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
	
	<link rel="stylesheet" id="acc-ars-css"  href="css/accordian-base-styles.css" type="text/css" media="all" />
	<script type="text/javascript" src="js/accordian.ars-1.0.js"></script>
	
	<script type="text/javascript" src="js/less-1.3.0.min.js"></script>
</head>
<body>
	<div>
		<p>
			<strong>behaviour inspecific:</strong><br />
			<strong>togglerlabel:</strong> 'string' - if not false, displays a toggler link<br />
			<strong>behaviour:</strong> 'hover' | 'click' - Expanansions are invoked based on this!</br >
			<br />
			<strong>hover specific:</strong><br />
			<strong>sticky:</strong> true = Item will stay open until another item is expanded, false - Item closes on mouseleave<br />
			
			<br />
			<strong>click specific:</strong><br />
			<strong>multiple:</strong> true = Accordian may have multiple items expanded, false = only one item will be open at a time<br />
			
		</p><hr /><br />
		<div class="accordian">
			[behaviour: 'hover'];
			<div id="myaccordian-status" ></div>
			<ul id="myaccordian" class="accordian">
				<li><div class="label">test 1</div><div class="contents">the contents1</div></li>
				<li class="default"><div class="label">test 2</div><div class="contents"><p>a really long paragraph</p><p>a second paragraph with a <a href="#">link</a></p></p></div></li>
				<li><div class="label">test 3</div><div class="contents">the contents3</div></li>
				<li><div class="label">test 4</div><div class="contents">the contents1</div></li>
			</ul>
		</div>
		
		<div class="accordian">
			[sticky: true,<br /> behaviour: 'hover'];
			<div id="myaccordian3-status" ></div>
			<ul id="myaccordian3" class="accordian">
				<li><div class="label">jkhy asd</div><div class="contents">the contents4</div></li>
				<li class="default"><div class="label">default item</div><div class="contents">the <br />contents5</div></li>
				<li><div class="label">lorem</div><div class="contents">the contents6</div></li>
				<li><div class="label">lorem</div><div class="contents">the <br />contents7</div></li>
			</ul>
		</div>

		
		<div class="accordian">
			[togglerlabel: 'Toggle!',<br /> behaviour: 'click'];
			<div id="myaccordian2-status" ></div>
			<ul id="myaccordian2" class="accordian">
				<li><div class="label">jkhy asd</div><div class="contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></li>
				<li><div class="label">lorem</div><div class="contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></li>
				<li class="default"><div class="label">default item</div><div class="contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></li>
				<li><div class="label">lorem</div><div class="contents">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></li>
			</ul>
		</div>
		
		
		<div class="accordian">
			[togglerlabel: 'Show/Hide',<br /> multiple: true,<br /> behaviour: 'click'];
			<div id="myaccordian4-status" ></div>
			<ul id="myaccordian4" class="accordian">
				<li><div class="label">jkhy asd</div><div class="contents">the contents4</div></li>
				<li class="default"><div class="label">default item</div><div class="contents" onclick="$(this).text($(this).text() + ' asd asd asd asd asd asd asd a casjkdgh asjdgkajsdga sjdasdhjug jh gajg lhjasg dkj 1231232')">the <br />contents5</div></li>
				<li class="default"><div class="label">default item 2</div><div class="contents">the contents6</div></li>
			</ul>
		</div>
		
		<div class="accordian">
			Circles turned on...<br />
			[togglerlabel: 'Toggle!',<br /> behaviour: 'click'];
			<div id="myaccordian5-status" ></div>
			<ul id="myaccordian5" class="accordian">
				<li><div class="label">jkhy asd</div><div class="contents">the contents4</div></li>
				<li><div class="label">lorem</div><div class="contents">the <br />contents5</div></li>
				<li class="default"><div class="label">default item</div><div class="contents">the contents6</div></li>
				<li><div class="label">lorem</div><div class="contents">the <br />contents7</div></li>
				
			</ul>
		</div>
		
		
	</div>
	
	
	<script type="text/javascript">
				
		
		// start accordians...
		$(function()
		{
			
			$('#myaccordian').each( function(){
				AccordianWidget( $(this), {
						behaviour: 'hover'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian-status').text('item \'' + label + '\' was shown...');
						}
					} );				
			} );

			$('#myaccordian3').each( function(){
				AccordianWidget( $(this), {
						sticky: true,
						behaviour: 'hover'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian3-status').text('item \'' + label + '\' was shown...');
						}
					} );				
			} );
			
			
			
			$('#myaccordian2').each( function(){
				
				var myAccordian = AccordianWidget( $(this), {
						togglerlabel: 'Toggle!',
						behaviour: 'click'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian2-status').text('item \'' + label + '\' was shown...');
						}
					} );
			} );
			
			
			$('#myaccordian2-inside').each( function(){
				
				var myAccordian = AccordianWidget( $(this), {
						togglerlabel: 'Toggle!',
						behaviour: 'click'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian2-inside-status').text('item \'' + label + '\' was shown...');
						}
					} );
			} );
			
			
			
			$('#myaccordian4').each( function(){
				AccordianWidget( $(this), {
						togglerlabel: 'Show/Hide',
						behaviour: 'click',
						multiple: true
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian4-status').text('item \'' + label + '\' was shown...');
						}
					} );				
			} );
			
			$('#myaccordian5').each( function(){
				AccordianWidget( $(this), {
						togglerlabel: 'Toggle!',
						behaviour: 'click'
					},
					{
						onHideItem: function( label ){},
						onShowItem: function( label )
						{
							$('#myaccordian5-status').text('item \'' + label + '\' was shown...');
						}
					} );				
			} );
			
		});
		
	</script>
</body>
</html>